import React, { Component } from 'react'
import { TabBar } from 'antd-mobile'
import PropTypes from 'prop-types'
import { withRouter } from 'react-router-dom'


const Item = TabBar.Item
class NavFooter extends Component{

    static propType = {
        footerNav: PropTypes.array.isRequired,
        unReadCount: PropTypes.number.isRequired
    }
    render() {
        const path = this.props.location.pathname
        const { unReadCount } = this.props
        return(
            <div className='nav-footer'>
                <TabBar>
                    {
                        this.props.footerNav?
                            this.props.footerNav.map((footer)=>
                                <Item
                                    badge={ footer.path === '/message'? unReadCount :0 }
                                    key={footer.name}
                                    title={footer.title}
                                    icon={
                                        <div style={{
                                            width: '22px',
                                            height: '22px',
                                            background: `url(${require(`./images/${footer.icon}.png`).default}) center center /  21px 21px no-repeat` }}
                                        />
                                    }
                                    selectedIcon={
                                        <div style={{
                                            width: '22px',
                                            height: '22px',
                                            background: `url(${require(`./images/${footer.icon}-selected.png`).default}) center center /  21px 21px no-repeat` }}
                                        />
                                    }
                                    selected={ path === footer.path}
                                    onPress={ () => this.props.history.replace(footer.path) }
                                />

                            ): null
                    }
                </TabBar>
            </div>
            
        )
    }
}

export default withRouter(NavFooter)